﻿@{
    Layout = "~/Views/Shared/_FormWhite.cshtml";
}
@section header{

    <link href="@Url.Content("~/lib/Montserrat/Montserrat.css?v=" + DateTime.Now.Ticks.ToString())" rel="stylesheet" type="text/css">

    <!-- wavesurfer.js -->
    <script src='@Url.Content("~/lib/wavesurfer/wavesurfer.js")' type="text/javascript"></script>

    <!-- plugins -->
    <script src='@Url.Content("~/lib/wavesurfer/wavesurfer.timeline.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/wavesurfer/wavesurfer.markers.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/wavesurfer/wavesurfer.minimap.js")' type="text/javascript"></script>

    <link href="@Url.Content("~/lib/summernote/0.8.15/summernote.min.css")" rel="stylesheet" type="text/css">
    <script src='@Url.Content("~/lib/summernote/0.8.15/summernote.js")' type="text/javascript"></script>

    <link href="@Url.Content("~/lib/recogito-js/recogito.min.css")" rel="stylesheet" type="text/css">
    <script src='@Url.Content("~/lib/recogito-js/recogito.min.js")' type="text/javascript"></script>

}

<style>

    body {
        font-family: 'Montserrat', sans-serif;
    }

    .r6o-editor {
        font-family: inherit;
        font-size: 14px;
        width: 360px;
    }

        .r6o-editor .widget {
            margin: 0;
            padding: 0 20px;
        }

        .r6o-editor .r6o-footer {
            margin-top: 10px;
            padding: 10px 20px 15px 20px;
        }

            .r6o-editor .r6o-footer .r6o-btn {
                line-height: 1.2;
                margin-left: 10px;
                margin-right: 0;
                min-width: 85px;
            }

    .r6o-annotation {
        border: none;
    }

    .option-legend, .option-text {
        display: inline-block;
    }

    .option-legend {
        border-radius: 10px;
        height: 10px;
        width: 10px;
        margin-left: 5px;
        margin-right: 10px;
    }

    #waveform_wrapper {
        width: 90%;
        /*border: 1px solid #ddd;*/
    }

    #waveform_loading .loaderbox {
        border: none;
        background-color: transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        -o-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    /*.wavesurfer-marker span {
        font-family: 'Montserrat', sans-serif !important;*/
    /*width: 200px !important;*/
    /*overflow: visible;
        z-index: 1000;
    }*/

    .wavesurfer-marker span {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 12px;
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px 10px 5px 5px;
        /* Position the tooltip */
        position: fixed;
        z-index: 1000;
    }

    .wavesurfer-marker:hover span {
        visibility: visible;
    }

    .call-info {
        margin-bottom: 20px;
    }

        .call-info label {
            color: black;
            font-weight: bold;
        }

        .call-info .bold {
            color: black;
            font-weight: bold;
        }

        .call-info .row {
            margin-top: 10px;
        }

    #compare_result {
        white-space: pre-line;
        max-height: 540px;
        overflow-y: scroll;
        color: black;
    }

        #compare_result .row {
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 8px;
            margin-bottom: 8px;
        }

            #compare_result .row .time {
                /*width: 50px !important;
            padding-left: 0px;*/
                padding-right: 0px;
            }

            #compare_result .row .speaker {
                /*width: 100px !important;*/
                padding-left: 0px;
                padding-right: 0px;
            }

            #compare_result .row .col-sm-9 {
                padding-left: 25px;
            }

        #compare_result .col-sm-1, #compare_result .col-sm-11 {
            color: #676a6c;
        }

        /*#compare_result > div:nth-of-type(even) {
            background: rgb(231, 234, 236);
        }*/

        #compare_result .transcript {
            position: relative;
        }

        #compare_result .customer_row {
            background: rgb(231, 234, 236);
        }

        #compare_result .agent_row {
            background: white;
        }

        #compare_result .transcript .stripe {
            background-color: red;
            position: absolute;
            width: 6px;
            top: 0;
            left: 0;
            bottom: 0;
        }

        #compare_result .transcript .customer {
            background-color: rgb(255, 217, 102);
        }

        #compare_result .transcript .agent {
            background-color: rgb(142, 169, 219);
        }

    .transcript_container .panel-heading {
        background-color: white;
        border-bottom: 0px;
        color: #676a6c;
    }

    .transcript_container .panel-line {
        padding-left: 14px;
        padding-right: 14px;
    }

    .transcript_container hr {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .custmer-consent .similar-words {
        color: black;
    }

    .custmer-consent .text-navy {
        color: rgb(41, 196, 77);
    }

    .custmer-consent h3 {
        font-size: 42px;
    }

    .custmer-consent h3 {
        font-size: 42px;
    }

    .custmer-consent h5 {
        font-size: 14px;
    }

    .macthed_text {
        background-color: rgb(255, 102, 102);
    }

    .macthed_text_pcp {
        background-color: rgb(1, 255, 204);
    }

    .macthed_text_callrecorded {
        background-color: lawngreen;
    }

    .macthed_text_callback {
        background-color: orangered;
    }

    .macthed_text_futurecall {
        background-color: gold;
    }

    .macthed_text_appointment {
        background-color: royalblue;
    }

    .macthed_text_medicare {
        background-color: hotpink;
    }

    .macthed_text_rx {
        background-color: violet;
    }

    .macthed_text_inboundcallback {
        background-color: darkviolet;
    }

    .macthed_keyword {
        background-color: #ffd9b0;
    }

    .macthed_entity {
        position: relative;
        display: inline-block;
    }

    .macthed_entity_person {
        border-bottom: 3px solid rgb(206, 109, 189);
    }

    .macthed_entity_date {
        border-bottom: 3px solid rgb(0, 115, 187);
    }

    .macthed_entity .tooltiptext {
        font-size: 12px;
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px 10px 5px 5px;
        margin-left: 10px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .macthed_entity:hover .tooltiptext {
        visibility: visible;
    }

    .macthed_text .macthed_keyword {
        background-color: rgb(255, 102, 102)
    }

    .note-editing-area {
        padding: 10px;
    }

    .comment-cta {
        display: none;
    }

    .comment-item {
        border-left: 5px solid transparent;
        border-bottom: 1px solid rgb(235, 235, 235);
        padding: 10px;
    }

        .comment-item:hover {
            border-left: 5px solid rgb(52,114,176);
            background-color: whitesmoke;
        }

    .comment-heading {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comment-avatar {
        height: 16px;
    }

    .comment-avatar-lg {
        height: 32px;
    }

    .comment-author {
        margin-left: 5px;
    }

    .comment-text {
        display: none;
        margin-left: 10px;
    }

    .comment-body {
        margin-top: 10px;
    }

    .utterance-note, .utterance-play {
        cursor: pointer;
    }

    .summary_container {
        background-color: #e9ecef;
    }
        /* .summary_container table {
            border-bottom: 1px solid transparent !important;
        }*/

        .summary_container tr:last-child td {
            border-bottom: 1px solid transparent !important;
        }

        .summary_container .title {
            color: black;
            font-size: 18px;
        }

        .summary_container .consent_content_wrapper {
            margin-top: 15px;
        }

        .summary_container .consent_container {
            width: 100%;
            background: #fff;
            border-radius: 6px;
            margin-top: 10px;
            padding: 13px 15px 3px 15px;
            box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        }
</style>
<div class="wrapper animated fadeInRight">
    <div>&nbsp;</div>
    @*<div class="table-responsive">
            <table class="table table-bordered text-center custmer-consent">
                <tr>
                    <td colspan="4"><span>CUSTOMER CONSENT</span></td>
                </tr>
                <tr>
                    <td>
                        <h3 class="p-enrollment">&nbsp;</h3>
                        <h5 class="p-consent">&nbsp;</h5>
                    </td>
                    <td>
                        <h3 class="p-score">0%</h3>
                        <h5 class="p-match">MATCH</h5>
                    </td>
                </tr>
            </table>
        </div>*@

    <div><a href="CallRecordingAnalysisIndex"><i class="fa fa-chevron-left fa-lg" aria-hidden="true"></i></a></div>

    <div>&nbsp;</div>

    <div class="row">
        <div class="col-sm-9">
            <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapse_recordings" aria-expanded="false" aria-controls="collapse_recordings">
                <span>All recordings</span>&nbsp;<span class="caret"></span>
            </button>

            <div class="collapse" id="collapse_recordings">
                <div id="searchDiv" style="display:none;">
                    <input id="customer_name" col="customer_name" type="hidden" />
                </div>
                <div class="select-table table-striped" style="padding:5px 15px;">
                    <table id="gridTable" data-mobile-responsive="true"></table>
                </div>
                <div>&nbsp;</div>
            </div>
        </div>
    </div>

    <div>&nbsp;</div>

    <div id="waveform_wrapper" style="height: 220px">
        <div id="waveform" style="position:relative">
            <div id="waveform_loading" style="position: absolute; top: 80px; left: 40%; display:none">
                <div class="loaderbox">
                    <div class="loading-activity"></div>
                    &nbsp;&nbsp;loading audio control...
                </div>
            </div>
        </div>
        <div id="wave-timeline"></div>
        <div id="waveform_action_form" style="margin-top:20px; text-align:center; display:none">
            <button id="waveform_action_button" class="btn btn-success" data-action="play">
                <i class="glyphicon glyphicon-play"></i>
                Play
                /
                <i class="glyphicon glyphicon-pause"></i>
                Pause
            </button>
        </div>
    </div>

    <div>
        <div class="row">
            <div class="col-sm-9">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#transcript_tab" aria-controls="transcript_tab" role="tab" data-toggle="tab">TRANSCRIPT</a></li>
                    <li role="presentation"><a href="#summary_tab" aria-controls="summary_tab" role="tab" data-toggle="tab">SUMMARY</a></li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="transcript_tab">
                        <div class="panel panel-default transcript_container">
                            @*<div class="panel-heading">
                                    TRANSCRIPT
                                </div>*@

                            <div class="panel-line">
                                <hr />
                            </div>

                            <div class="panel-body">
                                <div id="compare_result">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="summary_tab">
                        <div class="panel panel-default summary_container">

                            <div class="panel-body">
                                <div class="key-elements">
                                    <div class="title">
                                        Key Elements:
                                    </div>
                                    <div class="select-table table-striped" style="padding:5px 15px 15px 15px">
                                        <table id="gridTableKeyElements" data-mobile-responsive="true"></table>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper customer_consent_container">
                                    <div class="title">
                                        Customer Consent:
                                    </div>
                                    <div class="consent_container">
                                        <p class="customer_consent_content">
                                        </p>
                                        <p>
                                            Customer Answer: <span class="customer_consent_answer"></span>
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper pcp_container">
                                    <div class="title">
                                        PCP:
                                    </div>
                                    <div class="consent_container">
                                        <p class="pcp_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper callecorded_container">
                                    <div class="title">
                                        Permission to Record:
                                    </div>
                                    <div class="consent_container">
                                        <p class="callrecorded_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper callback_container">
                                    <div class="title">
                                        Call Back Permission if disconnected:
                                    </div>
                                    <div class="consent_container">
                                        <p class="callback_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper futurecall_container">
                                    <div class="title">
                                        Future Call Permission:
                                    </div>
                                    <div class="consent_container">
                                        <p class="futurecall_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper appointment_container">
                                    <div class="title">
                                        Scope of Appointment:
                                    </div>
                                    <div class="consent_container">
                                        <p class="appointment_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper medicare_container">
                                    <div class="title">
                                        Medicare Advantage Disclaimer:
                                    </div>
                                    <div class="consent_container">
                                        <p class="medicare_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper rx_container">
                                    <div class="title">
                                        RX Restriction:
                                    </div>
                                    <div class="consent_container">
                                        <p class="rx_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper inboundcallback_container">
                                    <div class="title">
                                        Enrollment Inbound Callback:
                                    </div>
                                    <div class="consent_container">
                                        <p class="inboundcallback_content">
                                        </p>
                                    </div>
                                </div>
                                <div class="consent_content_wrapper">
                                    <div class="title">
                                        Call Notes:
                                    </div>
                                    <div id="searchDivNotes" style="display:none;">
                                        <input id="use_pagination" col="use_pagination" type="hidden" value="1" />
                                    </div>
                                    <div class="select-table table-striped" style="padding:5px 15px;">
                                        <table id="gridTableNotes" data-mobile-responsive="true"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>&nbsp;</div>

                <div id="new_comment">
                    <div class="row">
                        <div class="col-sm-1">
                            <div class="text-right">
                                <img class="img-circle comment-avatar-lg" src="/image/portrait.png" />
                            </div>
                        </div>
                        <div class="col-sm-11">
                            <div class="comment-trigger">
                                <input type="text" class="form-control" id="txtNewComment" placeholder="Add a comment...">
                            </div>
                            <div class="comment-cta" style="display:none;">
                                <div id="comment_editor"></div>
                                <div id="comment_msg" class="text-danger"></div>
                                <div>
                                    <input id="btnAddComment" type="button" class="btn btn-primary" value="Save" />&nbsp;&nbsp;
                                    <input id="btnCancelComment" type="button" class="btn btn-default" value="Cancel" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <table style="border:0px solid white !important; width:100%;">
                        <tr>
                            <td style="vertical-align:top; width:50px;">
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>

                    <div id="comments_anchor">&nbsp;</div>

                    <section id="comments_section" style="display:none;">
                        <h4>Comments</h4>
                        <div id="comment_list"></div>
                    </section>

                    <script id="comment_template" type="text/template">
                        <div class="comment-item">
                            <div class="comment-heading">
                                <img class="img-circle comment-avatar" src="/image/portrait.png" />
                                <span class="comment-author">{author}</span>&nbsp;-&nbsp;<span class="comment-time">{time}</span>
                                <span class="comment-text">{txt}</span>
                            </div>
                            <div class="comment-body">{html}</div>
                        </div>
                    </script>
                </div>

                <div>&nbsp;</div>
            </div>
            <div class="col-sm-3">
                <div class="call-info">
                    <p>
                        <label>Customer Name:</label>
                        <br />
                        <span class="customer_name"></span>
                    </p>
                    <p>
                        <label>Call Purpose:</label>
                        <br />
                        <span class="p-enrollment"></span>
                    </p>
                    <p>
                        <label>Customer Consent:</label>
                        <br />
                        <span class="p-customer-score"></span>
                    </p>
                    <p>
                        <label>Timestamp of Customer Consent:</label>
                        <br />
                        <span class="customer_consent_timestamp"></span>
                    </p>
                    <p>
                        <label>Time of Call:</label>
                        <br />
                        <span class="time_of_call"></span>
                    </p>
                    <p>
                        <label>Length of Call:</label>
                        <br />
                        <span class="length_of_call"></span>
                    </p>
                    <p>
                        <label>Call Center:</label>
                        <br />
                        <span class="call_center"></span>
                    </p>
                    <p>
                        <label>Agent Name:</label>
                        <br />
                        <span class="agent_name"></span>
                    </p>
                    <p>
                        <label>Recording #:</label>
                        <br />
                        <span class="recording-id"></span>
                    </p>
                    <p>
                        <label>File:</label>
                        <br />
                        <span class="recording-file"></span>
                    </p>
                    <p>&nbsp;</p>
                    <div>
                        @*<input id="btnBack" type="button" class="btn btn-w-m btn-default" value="Back" />*@
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var id = ys.request("id");
    var recording_id = 0;
    var has_comment_editor = false;
    var wavesurfer_ready = false;
    var init_summary_tab = false;
    var refresh_notes_table = false;

    $(function () {
        getDetail();

        $("#btnBack").click(function () {
            self.location.href = 'CallRecordingAnalysisIndex';
        });

        $("#waveform_action_button").click(function () {
            if (wavesurfer.isPlaying()) {
                wavesurfer.pause();
            } else {
                wavesurfer.play();
            }
        });

        $(document).on("click", "#gridTable tbody tr", function () {
            var uniqueid = $(this).data('uniqueid');
            viewDetails(uniqueid);
        });

        $(document).on("click", "#compare_result .utterance-play", function () {
            if (wavesurfer_ready) {
                if (wavesurfer.isPlaying()) {
                    wavesurfer.pause();
                }
                var start = $(this).data('start');
                var end = $(this).data('end');

                wavesurfer.play(parseFloat(start), parseFloat(end));
            }
        });

        $(".nav-tabs li").click(function () {
            if ($(this).text() == "SUMMARY") {
                if (!init_summary_tab) {
                    initGridNotes();
                    init_summary_tab = true;
                } else if (refresh_notes_table) {
                    $('#gridTableNotes').ysTable('search');
                    refresh_notes_table = false;
                }
            }
        });

        $('#comment_editor').summernote({
            height: 100,
            dialogsInBody: true,
            placeholder: "Add a comment...",
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['codeview']]
            ]
        });

        $("#txtNewComment").click(function () {
            $(".comment-trigger").hide();
            $(".comment-cta").slideDown(200, function () {
                setTimeout(function () {
                    //$("body").scrollTop($("#comments_anchor").position().top);
                    $("#btnAddComment").focus();
                    $("#comment_editor").summernote("focus");
                }, 0);
            });
        });

        $("#btnAddComment").click(function () {
            if (recording_id > 0) {
                if ($('#comment_editor').summernote('isEmpty')) {
                    //ys.alertWarning("Comment can't be empty");
                    //$("#comment_msg").text("Comment can't be empty");
                    return;
                }

                $("#comment_msg").text("");

                var $this = $(this);

                $this.prop("disabled", true);

                var url = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/SaveRecordingComment")';
                var comment_html = $("#comment_editor").summernote('code');
                var data = {
                    recording_id: recording_id,
                    comment_html: comment_html
                };

                $.post(url, data, function (obj) {
                    if (obj.Tag == 1) getComments();
                }).always(function () {
                    $('#comment_editor').summernote('reset');
                    $this.prop("disabled", false);
                });
            }
        });

        $("#btnCancelComment").click(function () {
            $('#comment_editor').summernote('reset');
            $(".comment-cta").hide();
            $(".comment-trigger").show();
        });
    });

    function getDetail() {
        if (id > 0) {
            ys.ajax({
                url: '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetDetailJsonAnno")' + '?id=' + id,
                type: 'get',
                success: function (obj) {
                    if (obj.Tag == 1) {
                        recording_id = obj.Data.recording_id;

                        $('#compare_result').html(obj.Data.compare_result);

                        setTimeout(function () {
                            moveToCustomerConsentLocation($(".macthed_text"));
                        }, 100);

                        fillProperties(obj);
                        initWaveTimeLine(obj);
                        initGrid(obj);
                        initAnnotations();
                        getComments();
                        getUtteranceNotes();
                    }
                }
            });
        }
    }

    function viewDetails(id) {
        self.location.href = 'CallRecordingAnalysisDetail?id=' + id;
        return;

        ys.openDialog({
            title: 'Details',
            content: '@Url.Content("~/BusinessManage/CallRecordingAnalysis/CallRecordingAnalysisDetail")' + '?id=' + id,
            width: '768px',
            height: '640px',
            callback: function (index, layero) {
                layer.close(index);
            }
        });
    }

    function initGrid(obj) {
        $("#customer_name").val(obj.Data.customer_name);

        var queryUrl = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetPageListJson")';
        $('#gridTable').ysTable({
            url: queryUrl,
            sortName: 'c.time_of_call',
            sortOrder: 'desc',
            clickToSelect: true,
            pagination: true,
            toolbar: false,
            showColumns: false,
            showRefresh: false,
            showToggle: false,
            columns: [
                { field: 'customer_name', title: 'Customer Name', sortable: false, sortName: 'c.customer_name' },
                {
                    field: 'is_enrollment', title: 'Call Purpose', sortable: false, sortName: 'b.is_enrollment',
                    formatter: function (value, item, index) {
                        if (value == "1") {
                            return '<span class="label label-success">Enrollment</span>';
                        }
                        else if (value == "0") {
                            return '<span class="label label-warning">Pre-enrollment</span>';
                        }
                        else {
                            return '<span class="label label-warning">Pre-enrollment</span>';
                        }
                    }
                },
                { field: 'time_of_call', title: 'time_of_call_value', visible: false },
                { field: 'time_of_call_text', title: 'Time of Call', sortable: false, sortName: 'c.time_of_call' },
                { field: 'agent_name', title: 'Agent Name', sortable: false, sortName: 'c.agent_name' }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTable').ysTable('getPagination', params);
                var queryString = $('#searchDiv').getWebControls(pagination);
                return queryString;
            }
        });
    }

    function fillProperties(obj) {
        var is_enrollment = obj.Data.is_enrollment;
        var has_customerconsent = obj.Data.has_customerconsent;
        var similiarity_score = obj.Data.similiarity_score;
        var customer_consent_score = obj.Data.customer_consent_score;

        $(".recording-id").text(obj.Data.recording_id);
        $(".recording-file").text(obj.Data.recording_file);

        $(".call_center").text(obj.Data.call_center);
        $(".time_of_call").text(obj.Data.time_of_call_text);
        $(".length_of_call").text(obj.Data.length_of_call);
        $(".agent_name").text(obj.Data.agent_name);
        $(".customer_name").text(obj.Data.customer_name);
        $(".customer_consent_timestamp").text(obj.Data.customer_consent_timestamp);
        $(".customer_timestamp").text(obj.Data.customer_timestamp);
        $(".pcp_timestamp").text(obj.Data.pcp_timestamp);
        $(".callrecorded_timestamp").text(obj.Data.callrecorded_timestamp);

        $(".p-results").text("");
        $(".p-words").text(obj.Data.matchedwords);

        if (is_enrollment == "1") {
            $(".p-enrollment").text("Enrollment");
        }
        else if (is_enrollment == "0") {
            $(".p-enrollment").text("Pre-Enrollment");
        }
        else {

        }

        if (has_customerconsent == "1") {
            $(".p-consent").addClass("text-navy").text("WITH CUSTOMER CONSENT");
        }
        else if (has_customerconsent == "0") {
            $(".p-consent").addClass("text-warning").text("NO CUSTOMER CONSENT");
        }
        else {

        }

        if (similiarity_score != "") {

            if (similiarity_score != "N/A") {
                similiarity_score += "%";
            }

            //$(".p-score, .p-match").addClass("text-navy");
            $(".p-score").text(similiarity_score);
        }

        if (customer_consent_score != "" && customer_consent_score != null) {

            if (customer_consent_score != "N/A") {
                customer_consent_score += "%";
            }

            $(".p-customer-score").text(customer_consent_score);
        }

        if (customer_consent_score != "" && customer_consent_score != null && customer_consent_score != "N/A") {
            //$(".customer_consent_content").text($("#compare_result .macthed_text").text());
            $(".customer_consent_content").text(obj.Data.customer_consent_content);
            $(".customer_consent_answer").text(obj.Data.customer_consent_answer);
        } else {
            $(".customer_consent_container").hide();
        }

        if (obj.Data.pcp_content != "") {
            //$(".pcp_content").text($("#compare_result .macthed_text_pcp").text());
            $(".pcp_content").text(obj.Data.pcp_content);
        } else {
            $(".pcp_container").hide();
        }

        if (obj.Data.callrecorded_content != "") {
            //$(".callrecorded_content").text($("#compare_result .macthed_text_callrecorded").text());
            $(".callrecorded_content").text(obj.Data.callrecorded_content);
        } else {
            $(".callecorded_container").hide();
        }

        if (obj.Data.callback_content != "") {
            $(".callback_content").text(obj.Data.callback_content);
        } else {
            $(".callback_container").hide();
        }

        if (obj.Data.futurecall_content != "") {
            $(".futurecall_content").text(obj.Data.futurecall_content);
        } else {
            $(".futurecall_container").hide();
        }

        if (obj.Data.appointment_content != "") {
            $(".appointment_content").text(obj.Data.appointment_content);
        } else {
            $(".appointment_container").hide();
        }

        if (obj.Data.medicare_content != "") {
            $(".medicare_content").text(obj.Data.medicare_content);
        } else {
            $(".medicare_container").hide();
        }

        if (obj.Data.rx_content != "") {
            $(".rx_content").text(obj.Data.rx_content);
        } else {
            $(".rx_container").hide();
        }

        if (obj.Data.inboundcallback_content != "") {
            $(".inboundcallback_content").text(obj.Data.inboundcallback_content);
        } else {
            $(".inboundcallback_container").hide();
        }

        $('#gridTableKeyElements').ysTable({
            data: obj.Data.keyElements,
            clickToSelect: false,
            pagination: false,
            toolbar: false,
            showColumns: false,
            showRefresh: false,
            showToggle: false,
            striped: false,
            columns: [
                { field: 'intent', title: 'Intent' },
                { field: 'score', title: 'Score' },
                { field: 'timestamp', title: 'Timestamp' }
            ]
        });

    }

    var wavesurfer;
    //var wave_markers = [];
    function initWaveTimeLine(obj) {

        $("#waveform_loading").show();
        var wav_url = obj.Data.wav_url;
        var markers = [];

        if (obj.Data.wav_markers && obj.Data.wav_markers.length > 0) {

            //wave_markers = obj.Data.wav_markers;

            for (var i = 0; i < obj.Data.wav_markers.length; i++) {
                var marker = new Object();
                marker.time = obj.Data.wav_markers[i].time;
                marker.label = obj.Data.wav_markers[i].label;
                marker.color = obj.Data.wav_markers[i].color;
                marker.position = obj.Data.wav_markers[i].position;
                markers.push(marker);
            }

        }

        //wavesurfer = WaveSurfer.create({
        //    container: document.querySelector('#waveform'),
        //    //pixelRatio: 1,
        //    minPxPerSec: 3,
        //    //hideScrollbar: true,
        //    scrollParent: true,
        //    //normalize: true,
        //    waveColor: 'darkcyan',
        //    plugins: [
        //        WaveSurfer.markers.create({
        //            markers: markers
        //        }),
        //        WaveSurfer.timeline.create({
        //            container: "#wave-timeline"
        //        })
        //    ]
        //});

        wavesurfer = WaveSurfer.create({
            container: document.querySelector('#waveform'),
            //pixelRatio: 1,
            //minPxPerSec: 3,
            hideScrollbar: true,
            scrollParent: false,
            //normalize: true,
            waveColor: 'darkcyan',
            plugins: [
                WaveSurfer.markers.create({
                    markers: markers
                }),
                WaveSurfer.timeline.create({
                    container: "#wave-timeline"
                })
            ]
        });

        //wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
        wavesurfer.load(wav_url);

        wavesurfer.on('ready', function () {
            $("#waveform_loading").hide();
            $("#waveform_action_form").show();
            wavesurfer_ready = true;
            //wavesurfer.seekAndCenter(0.6);

            $('.wavesurfer-marker').each(function (i, obj) {
                var left = $(this).css('left').replace('px', '');
                var offset = parseInt(left) + 40;
                $(this).find('span').css('left', offset + 'px');
            });

        });

        wavesurfer.on('marker-click', function (obj) {
            if (!wavesurfer.isPlaying()) {
                wavesurfer.play();
            }

            if (obj.label.indexOf("Agent Asking For Consent") >= 0) {
                var $move_element = $(".macthed_text");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("PCP") >= 0) {

                var $move_element = $(".macthed_text_pcp");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("Permission to Record") >= 0) {

                var $move_element = $(".macthed_text_callrecorded");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("Call Back Permission if disconnected") >= 0) {

                var $move_element = $(".macthed_text_callback");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("Future Call Permission") >= 0) {

                var $move_element = $(".macthed_text_futurecall");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("Scope of Appointment") >= 0) {

                var $move_element = $(".macthed_text_appointment");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("Medicare Advantage Disclaimer") >= 0) {

                var $move_element = $(".macthed_text_medicare");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("RX Restriction") >= 0) {

                var $move_element = $(".macthed_text_rx");
                moveToCustomerConsentLocation($move_element);
            }

            if (obj.label.indexOf("Enrollment Inbound Callback") >= 0) {

                var $move_element = $(".macthed_text_inboundcallback");
                moveToCustomerConsentLocation($move_element);
            }
        });

    }

    function moveToCustomerConsentLocation($move_element) {

        //var $callinfoDiv = $('.call-info');
        var $parentDiv = $('#compare_result');
        var $mactched_Item = $move_element.first().closest('.row');

        $parentDiv.scrollTop(0);

        if ($mactched_Item.size() > 0) {
            //var offset = $mactched_Item.position().top - $parentDiv.height() / 2;
            var offset = $mactched_Item.position().top - 100;
            $parentDiv.scrollTop(offset);
        }

    }

    function getComments() {
        if (recording_id > 0) {
            var url = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetRecordingComments")' + '?recordingId=' + recording_id;
            var comments = [];

            $.get(url, function (obj) {
                if (obj.Tag == 1) comments = obj.Data;
            }).always(function () {
                var list = $("#comment_list");
                var template = $("#comment_template").html();

                $("#comments_section").hide();
                list.empty();

                $.each(comments, function (index, item) {
                    var hc = $("<div/>").html(item.comment_html);

                    $("<div/>").html(template.replace("{author}", item.commenter)
                        .replace("{time}", item.created_at_text)
                        .replace("{txt}", hc.text())
                        .replace("{html}", hc.html())).appendTo(list);
                });

                if (comments.length > 0) $("#comments_section").show();
            });
        }
    }

    var utterance_note_time_start = "";
    var utterance_note_node = null;
    var utterance_note_list = [];

    function getUtteranceNotes() {
        utterance_note_time_start = "";
        utterance_note_node = null;
        utterance_note_list = [];

        if (recording_id > 0) {
            var url = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetUtteranceNotes")' + '?recordingId=' + recording_id;

            $.get(url, function (obj) {
                if (obj.Tag == 1) utterance_note_list = obj.Data;
            }).always(function () {
                u_notes = $("#compare_result").find(".utterance-note");

                $(u_notes).each(function () {
                    var $note = $(this);
                    var u_timestart = $note.data("timestart") || "u_timestart";

                    $note.addClass("fa fa-comment");

                    $.each(utterance_note_list, function (index, item) {
                        var time_start = item.time_start || "time_start";

                        if (time_start == u_timestart) $note.removeClass("fa-comment").addClass("fa-comments text-info");
                    });

                    $note.off("click").on("click", function () {
                        utterance_note_node = $note;
                        utterance_note_time_start = $note.data("timestart") || "";

                        if (utterance_note_time_start == "") return;

                        var layer_html = $("#add_utterance_note_template").html();
                        var layer_div = $("<div/>").html(layer_html);
                        var layer_notes = layer_div.find("#divUtteranceNote");
                        var layer_list = layer_div.find("#lstUtteranceNote");
                        var template = $("#utterance_note_template").html();

                        layer_notes.hide();
                        layer_list.empty();

                        $.each(utterance_note_list, function (index, item) {
                            if (item.time_start == utterance_note_time_start) {
                                var hc = $("<div/>").html(item.note_html);

                                $("<div/>").html(template.replace("{author}", item.noter)
                                    .replace("{time}", item.created_at_text)
                                    .replace("{txt}", hc.text())
                                    .replace("{html}", hc.html())).appendTo(layer_list);
                            }
                        });

                        if (utterance_note_list.length > 0) layer_notes.show();

                        layer_html = layer_div.html();

                        ys.openDialogContent({
                            content: layer_html, width: '600px', height: 'auto', function() {
                            }
                        });

                        setTimeout(function () {
                            $("#txtUtteranceNote").focus();
                            $("#btnAddUtteranceNote").off("click").on("click", function () {
                                if (recording_id > 0) {
                                    if (utterance_note_node == null || utterance_note_time_start == "") return;

                                    var note_html = $.trim($("#txtUtteranceNote").val() || "");

                                    if (note_html == "") {
                                        //$("#utterance_note_msg").text("Note can't be empty");
                                        return;
                                    }

                                    $("#utterance_note_msg").text("");

                                    var $this = $(this);

                                    $this.prop("disabled", true);

                                    var url = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/SaveUtteranceNote")';
                                    var data = {
                                        recording_id: recording_id,
                                        time_start: utterance_note_time_start,
                                        note_html: note_html
                                    };

                                    $.post(url, data, function (obj) {
                                        if (obj.Tag == 1) {
                                            getUtteranceNotes();
                                            refresh_notes_table = true;
                                        }
                                    }).always(function () {
                                        $this.prop("disabled", false);
                                        layer.close($this.closest(".layui-layer-page").attr("times"));
                                    });
                                }
                            });

                            $("#btnCancelUtteranceNote").off("click").on("click", function () {
                                layer.close($(this).closest(".layui-layer-page").attr("times"));
                            });
                        }, 500);
                    });
                });
            });
        }
    }

    function initGridNotes() {

        var queryUrl = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetUtteranceNotes")' + '?recordingId=' + recording_id;

        $('#gridTableNotes').ysTable({
            url: queryUrl,
            sortName: 'time_start',
            sortOrder: 'asc',
            clickToSelect: true,
            pagination: true,
            toolbar: false,
            showColumns: false,
            showRefresh: false,
            showToggle: false,
            columns: [
                { field: 'time_start', title: 'Time Start' },
                { field: 'noter', title: 'Creator' },
                { field: 'note_html', title: 'Content' },
                //{ field: 'note_version', title: 'Note Version' },
                { field: 'created_at_text', title: 'Created At' }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTableNotes').ysTable('getPagination', params);
                var queryString = $('#searchDivNotes').getWebControls(pagination);
                return queryString;
            }
        });
    }

</script>

<script id="add_utterance_note_template" type="text/template">
    <div style="height:100%; padding:25px;">
        <div class="form-group">
            <input type="text" class="form-control" id="txtUtteranceNote" placeholder="Add a note...">
            <div id="utterance_note_msg" class="text-danger"></div>
        </div>
        <div class="form-group m-t-md text-right">
            <input id="btnAddUtteranceNote" type="button" class="btn btn-primary" value="Save" />&nbsp;&nbsp;
            <input id="btnCancelUtteranceNote" type="button" class="btn btn-default" value="Cancel" />
        </div>
        <div id="divUtteranceNote" style="display:none;">
            <h4>Notes</h4>
            <div id="lstUtteranceNote" style="max-height:250px; overflow:auto;"></div>
        </div>
    </div>
</script>

<script id="utterance_note_template" type="text/template">
    <div class="comment-item">
        <div class="comment-heading">
            <img class="img-circle comment-avatar" src="/image/portrait.png" />
            <span class="comment-author">{author}</span>&nbsp;-&nbsp;<span class="comment-time">{time}</span>
            <span class="comment-text">{txt}</span>
        </div>
        <div class="comment-body">{html}</div>
    </div>
</script>

<script id="anno_template" type="text/template">
    <select></select>
</script>

<script>
    var sample_anno = {
        '@@context': 'http://www.w3.org/ns/anno.jsonld',
        'id': 'https://www.example.com/recogito-js-example/foo',
        'type': 'Annotation',
        'body': [
            {
                'type': 'TextualBody',
                'value': '2',
                'purpose': 'intent_id'
            }
        ],
        'target': {
            'selector': [
                {
                    'type': 'TextQuoteSelector',
                    'exact': 'tele'
                }, {
                    'type': 'TextPositionSelector',
                    'start': 38,
                    'end': 57
                }
            ]
        }
    };

    var IntentWidget = function (args) {
        var currentIntentBody = args.annotation ?
            args.annotation.bodies.find(function (b) {
                return b.purpose == 'intent_id';
            }) : null;

        var intent_id = currentIntentBody ? currentIntentBody.value : "";

        var formatOption = function (option) {
            if (!option.id) return option.text;

            var intent = intent_list.find((i) => { return i.Id.toString() == option.id });

            if (intent) {
                var $option = $('<div><span class="option-legend"></span><span class="option-text"></span></div>');

                $option.find(".option-legend").addClass(intent.color_class);
                $option.find(".option-text").text(option.text);

                return $option;
            }

            return option.text;
        };

        var selectorChanged = function (evt) {
            addIntentBody(evt.target.value);
        }

        var addIntentBody = function (intent_id) {
            if (intent_id == "") return;

            if (currentIntentBody) {
                args.onUpdateBody(currentIntentBody, {
                    type: 'TextualBody',
                    purpose: 'intent_id',
                    value: intent_id
                });
            } else {
                args.onAppendBody({
                    type: 'TextualBody',
                    purpose: 'intent_id',
                    value: intent_id
                });
            }
        }

        var closeEditor = function () {
            args.onSaveAndClose();
        }

        var $div = $("<div>").html($("#anno_template").html());
        var $selector = $div.find("select");

        intent_list.forEach(function (intent) {
            var option = new Option(intent.name, intent.Id, false, false);

            $selector.append(option);
        });

        $selector.val(intent_id).select2({
            placeholder: "Select a Tag",
            minimumResultsForSearch: -1,
            templateResult: formatOption,
            templateSelection: formatOption
        }).on('change', selectorChanged);

        return $div[0];
    }

    var intent_list = [];

    function initAnnotations() {
        var url = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetIntentList")';

        $.get(url, function (obj) {
            if (obj.Tag == 1) intent_list = obj.Data;
        }).always(function () {
            $("#compare_result .utterance-content").each(function () {
                var that = this;
                var r = Recogito.init({
                    content: this,
                    locale: 'auto',
                    widgets: [{ widget: IntentWidget }],
                    formatter: function (annotation) {
                        var color_class = "";
                        var intent_id = getAnnotationIntentId(annotation);
                        var intent = intent_list.find((i) => { return i.Id.toString() == intent_id });

                        if (intent) color_class = intent.color_class;

                        return color_class;
                    }
                });

                r.on('createAnnotation', function (annotation) {
                    saveAnnotation(that, annotation, null, 0);
                });

                r.on('updateAnnotation', function (annotation, previous) {
                    var intent_id = getAnnotationIntentId(annotation);
                    var prev_id = getAnnotationIntentId(previous);

                    if (intent_id == prev_id) return;

                    saveAnnotation(that, annotation, 0, 0);
                });

                r.on('deleteAnnotation', function (annotation) {
                    saveAnnotation(that, annotation, 0, 1);
                });

                $(this).find(".annotation-text").each(function () {
                    var $this = $(this);
                    var anno = {
                        '@@context': 'http://www.w3.org/ns/anno.jsonld',
                        'id': $this.data('uuid'),
                        'type': 'Annotation',
                        'body': [
                            {
                                'type': 'TextualBody',
                                'value': $this.data('intent-id'),
                                'purpose': 'intent_id'
                            }
                        ],
                        'target': {
                            'selector': [
                                {
                                    'type': 'TextQuoteSelector',
                                    'exact': $this.text()
                                },
                                {
                                    'type': 'TextPositionSelector',
                                    'start': $this.data('pos-start'),
                                    'end': $this.data('pos-end')
                                }
                            ]
                        }
                    };

                    // Clear all css classes, annotation will handle it.
                    $this.removeClass();

                    r.addAnnotation(anno);
                });
            });
        });
    }

    function getAnnotationIntentId(annotation) {
        var intent_id = "";
        var intent_body = annotation.body.find((b) => { return b.purpose == 'intent_id' });

        if (intent_body) intent_id = intent_body.value;

        return intent_id;
    }

    function saveAnnotation(element, annotation, anno_id, is_deleted) {
        if (recording_id > 0) {
            var intent_id = getAnnotationIntentId(annotation);
            var anno_text = '';
            var pos_start = -1;
            var txt_selector = annotation.target.selector.find((s) => { return s.type == 'TextQuoteSelector' });
            var pos_selector = annotation.target.selector.find((s) => { return s.type == 'TextPositionSelector' });
            var time_start = $(element).data("timestart") || "";

            if (txt_selector) anno_text = txt_selector.exact;
            if (pos_selector) pos_start = pos_selector.start;
            if (intent_id == '' || anno_text == '' || time_start == "" || pos_start < 0) return;

            var url = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/SaveAnnotation")';

            // Annotations are identified by time_start and uuid.
            // For now, if anno_id is null, it means a new one.
            var data = {
                id: anno_id,
                uuid: annotation.id,
                intent_id: intent_id,
                recording_id: recording_id,
                time_start: time_start,
                annotation_text: anno_text,
                position_start: pos_start,
                is_deleted: is_deleted
            };

            $.post(url, data, function (obj) {
                if (obj.Tag == 1) {
                }
            }).always(function () {
            });
        }
    }
</script>